<#include "_layout.html"/>
<@layout>
<div class="container">
	<!-- -->
	<div class="col-md-9 col-sm-7">
		<@jp.indexPage module="article">
		<#if page.isFirstPage() >
		<@jp.contents flag="hot" module="article" count="3" >
			<div class="x-layout-100 clearfix x-margin-top-20 x-margin-bottom-10" style="height:260px;">
	           	<#list contents as content>
	           	<#if content?is_first >
				<div class="x-pull-left x-layout-70 image-box">
			        <div class="yfh-banner-image">
			        	<img src="${(content.thumbnail)!}"  />
			        </div>
			        <div class="x-box-border yfh-banner-transfer">
			       	 <a href="${(content.url)!}">
			          <p style="font-size:1.2rem;">${(content.title)!}</p>
			          </a>
			        </div>
		        </div>

				<#else>
				<div class="x-pull-right x-layout-28 sub-image-box ">
					 <div class="yfh-banner-image">
			        	<img src="${(content.thumbnail)!}" />
			        </div>
			        <div class="x-box-border yfh-banner-transfer">
			       	 <a href="${(content.url)!}">
			          <p>${(content.title)!}</p>
			          </a>
			        </div>
				</div>
				</#if>
				</#list>
			</div>
		</@jp.contents>
		</#if>

		<#list page.getList() as content>
			<!--有封面的-->
			<#if content.thumbnail ??>
				<div class="single-blog single-column">
					<div class="post-thumb">
						<a href="${content.url}"><img src="${content.thumbnailByName('t1')!}" class="img-responsive" alt=""></a>
						<div class="post-overlay">
							<span class="uppercase"><a href="#"><small>推荐</small></a></span>
						</div>
					</div>
					<div class="post-content overflow">
						<h3 class="post-title bold"><a href="${content.url}">${content.title}</a></h3>
						<h3 class="post-author"><a href="#">${content.nickname!}</a></h3>
						<p>${content.summary}[...]</p>
						<a href="${content.url}" class="read-more">查看更多</a>
						<div class="post-bottom overflow">
							<ul class="nav navbar-nav post-nav">
								<li>${content.getTaxonomyAsUrl('category','><i class= "fa fa-tag" > </i')!'未分类'}</li>
								<li><a href="#"><i class="fa fa-clock-o"></i>${content.created?string('yyyy-MM-dd')!}</a></li>
								<li><a href="#"><i class="fa fa-eye"></i>${content.viewCount!'0'}</a></li>
								<li><a href="#comment"><i class="fa fa-comments"></i>${content.commentCount!'0'}</a></li>
							</ul>
						</div>
					</div>
				</div>
				<!--一张图片-->
			<#elseif ((content.imageCount > 0) && (content.imageCount<3)) >
				<div class="single-blog single-column">
					<div class="post-content overflow">
							<div class="x-layout-30 x-pull-left x-layout-33-sudoku x-padding-5">
							<p>
								<a href="${content.url}">
									<img class="x-image-size-11" src="${(content.firstImage)!}" />
								</a>
							</p>
						    </div>
							<h3 class="post-title bold"><a href="${content.url}">${content.title}</a></h3>
							<h3 class="post-author"><a href="#">${content.nickname!}</a></h3>
							<p>${content.summary}[...]</p>
							<a href="${content.url}" class="read-more">查看更多</a>
						<div class="post-bottom overflow">
							<ul class="nav navbar-nav post-nav">
								<li>${content.getTaxonomyAsUrl('category','><i class= "fa fa-tag" > </i')!'未分类'}</li>
								<li><a href="#"><i class="fa fa-clock-o"></i>${content.created?string('yyyy-MM-dd')!}</a></li>
								<li><a href="#"><i class="fa fa-eye"></i>${content.viewCount!'0'}</a></li>
								<li><a href="#comment"><i class="fa fa-comments"></i>${content.commentCount!'0'}</a></li>
							</ul>
						</div>
					</div>
				</div>
				<!--三张-->
			<#elseif (content.imageCount>3) >
				<div class="single-blog single-column">
					<div class="post-content overflow">
						<h3 class="post-title bold"><a href="${content.url}">${content.title}</a></h3>
						<div class="x-layout-100">
							<p class="x-pull-left x-layout-33-sudoku x-box-border x-padding-5">
								<a href="${content.url}">
									<img src="${(content.imageByIndex(0,'t2'))}" />
								</a>
							</p>
							<p class="x-pull-left x-layout-33-sudoku x-box-border x-padding-5">
								<a href="${content.url}">
									<img src="${(content.imageByIndex(1,'t2'))}" />
								</a>
							</p>
							<p class="x-pull-left x-layout-33-sudoku x-box-border x-padding-5">
								<a href="${content.url}">
									<img src="${(content.imageByIndex(2,'t2'))}" />
								</a>
							</p>
						</div>
						<h3 class="post-author"><a href="#">${content.nickname!}</a></h3>
						<p>${content.summary}[...]</p>
						<a href="${content.url}" class="read-more">查看更多</a>
						<div class="post-bottom overflow">
							<ul class="nav navbar-nav post-nav">
								<li>${content.getTaxonomyAsUrl('category','><i class= "fa fa-tag" > </i')!'未分类'}</li>
								<li><a href="#"><i class="fa fa-clock-o"></i>${content.created?string('yyyy-MM-dd')!}</a></li>
								<li><a href="#"><i class="fa fa-eye"></i>${content.viewCount!'0'}</a></li>
								<li><a href="#comment"><i class="fa fa-comments"></i>${content.commentCount!'0'}</a></li>
							</ul>
						</div>
					</div>
				</div>
				<!--默认-->
			<#else>
				<div class="single-blog single-column">
					<div class="post-content overflow">
						<h3 class="post-title bold"><a href="${content.url}">${content.title}</a></h3>
						<h3 class="post-author"><a href="#">${content.nickname!}</a></h3>
						<p>${content.summary}[...]</p>
						<a href="${content.url}" class="read-more">查看更多</a>
						<div class="post-bottom overflow">
								<ul class="nav navbar-nav post-nav">
									<li>${content.getTaxonomyAsUrl('category','><i class= "fa fa-tag" > </i')!'未分类'}</li>
									<li><a href="#"><i class="fa fa-clock-o"></i>${content.created?string('yyyy-MM-dd')!}</a></li>
									<li><a href="#"><i class="fa fa-eye"></i>${content.viewCount!'0'}</a></li>
									<li><a href="#comment"><i class="fa fa-comments"></i>${content.commentCount!'0'}</a></li>
								</ul>
						</div>
					</div>
				</div>
			</#if>
		</#list>

		<div class="portfolio-pagination">
			<ul class="pagination">
				<@pagination>
				<#list pages as page>
					<li class="${page.style!}"><a href="${page.url!}">${page.text!}</a></li>
				</#list>
				</@pagination>
			</ul>
		</div>

		</@jp.indexPage>

	</div>
	<!-- -->
<div class="col-md-3 col-sm-5">
		<#include "_ad_box.html"/>
		<#include "_content_box1.html"/>
		<#include "_content_box2.html"/>
		<#include "_tags_box.html"/>
	</div>
</div>
</@layout>
